<template>
  <div class="songList-container" :class="{ view: songList.length > 0 }">
    <div class="title1">
      全部歌单
    </div>
    <!-- 全部歌单列表 -->
    <div class="allSongList-content">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :error="error"
        error-text="加载失败，请点击重试"
      >
        <van-grid :border="false" :column-num="2">
          <van-grid-item
            v-for="item in allSongList"
            :key="item.coverImgId"
            @click="toSongList(item)"
          >
            <div class="image-content">
              <van-image :src="item.coverImgUrl"></van-image>
              <div class="number">{{ item.playCount | countFomat }}</div>
            </div>
            <div class="title">{{ item.name }}</div>
          </van-grid-item>
        </van-grid>
      </van-list>
    </div>
    <!-- 全部歌单列表 -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import api from '../../api/index'
export default {
  name: 'songListIndex',
  components: {},
  props: {},
  data() {
    return {
      allSongList: [],
      offset: 0,
      flag: false,
      loading: false,
      finished: false,
      error: false
    }
  },
  computed: {
    ...mapGetters(['songList'])
  },
  watch: {},
  created() {},
  mounted() {},
  filters: {
    countFomat(v) {
      if (v < 9999) {
        return v
      } else {
        return (v / 10000).toFixed(0) + '万'
      }
    }
  },
  methods: {
    toSongList(item) {
      this.$router.push({
        name: 'playListDetail',
        params: {
          id: item.id,
          name: item.name,
          coverImg: item.coverImgUrl,
          creator: item.creator,
          count: item.playCount,
          desc: item.description
        }
      })
    },
    async onLoad() {
      try {
        const result = await this.$http.get(
          api.getPlayListByWhere(this.offset, 6)
        )
        // console.log(result)
        // const total = result.total
        const list = result.playlists
        // console.log(list)
        this.allSongList.push(...list)
        this.loading = false

        if (list.length) {
          this.offset = this.offset + 6
        } else {
          this.finished = true
        }
        // if (this.offset > total) this.offset = total
      } catch (err) {
        this.error = true
        this.loading = false
      }
    },
    handlerScroll() {
      // this.getAllSongLIst()
    }
  }
}
</script>
<style lang="less" scoped>
.view {
  padding-bottom: 54px;
}
.songList-container {
  height: 85vh;
  overflow-y: auto;
  padding: 0 12px;
  .title1 {
    height: 40px;
    line-height: 40px;
    font-size: 30px;
    border-left: 6px solid #ce3d3e;
    padding-left: 10px;
  }
  /deep/ .allSongList-content {
    .van-grid {
      padding-left: 0 !important;
      .van-grid-item__content:nth-child(even) {
        padding-right: 0 !important;
      }
      .van-grid-item__content {
        padding: 0 10px 20px 0;
        .image-content {
          width: 100%;
          height: 100%;
          position: relative;
          overflow: hidden;
          .van-image {
            width: 100%;
          }
          .number {
            text-align: right;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            width: 100%;
            height: 40px;
            background-color: rgba(0, 0, 0, 0.2);
            color: #eee;
            line-height: 40px;
            font-size: 30px;
          }
        }
      }
      .title {
        width: 100%;
        font-size: 20px;
        text-align: left;
        height: 60px;
      }
    }
  }
}
</style>
